Revealjs

Ambra Perugini

Let’s start!

  • For the presentation we will use revealjs
  • Super flexible
  • Dynamic slides
  • You can also put columns, panels and show your code or create graphs

YAML

---
title: "Revealjs"
author: "Ambra Perugini"
format:
  revealjs:
    code-line-numbers: false
    theme: default
    slide-number: c/t
    transition: slide
    background-transition: fade
    footer: "ambra.perugini@phd.unipd.it"
    logo: "figures/psicostatLogo.png"
    incremental: false
    self-contained: true
    embed-resources: true
    code-fold: true
    code-summary: "Codice"
    code-overflow: wrap
    toc: true 
    bibliography: bibliography.bib
    csl: apa.csl
execute:
  echo: true
  output: true
editor: source
---

YAML

Many things can be specified in the YAML:

  • toc,
  • embed-resources,
  • incremental (true or false) to have lists showing one point at the time
  • slide-number (c/t -> current slide / total number of slides, true shows only the current slide number)
  • code-fold: true
  • More options

If you want to separate two parts of a slide: . . .

What can you add?

Notes1

In this way: ^[That goes to the bottom]

You can also set up single slides formats

  • {.smaller} to have smaller text in one slide
  • {.scrollable} to make it scrollable to prevent content overflow
  • {.unlisted} to not show the slide title in the toc

More features

Here I put something as a footer

:::{.footer}

Here I put something as a footer

:::
::: aside

Here I put something as a note

:::

Then to have speaker notes in your presentation:

::: {.notes}
Speaker notes go here.
:::

Here as well you can use the same text formatting:

I am centered

::: {style="text-align: center;"}
I am centered
:::

I am bigger

::: {style="text-align: center; font-size: 2em;"}
I am bigger
:::

I am bigger and pink

::: {style="text-align: center; font-size: 2em; color: pink;"}
I am bigger and pink
:::

Themes

To put in your YAML:

  • beige
  • blood
  • dark
  • default
  • league
  • moon
  • night
  • serif
  • simple
  • sky
  • solarized

Different transition types

  • transition=“convex”

  • transition=“concave”

  • transition=“fade”

  • transition=“slide”

  • transition=“zoom”

To put between brakets after the title of the slide.

Highliting specific code lines

x <- rnorm(30,10,2)
y <- x + rnorm(30,0,1)
z <- y*.5 + rnorm(30,0,1)
cor(x,y)
cor(y,z)
cor(x,z)
plot(x,y)
plot(y,z)
plot(x,z)

code-line-numbers="7,9" to highlight only 7 and 9

code-line-numbers="7|9" to highlight first 7 and then 9

code-line-numbers="|7|9" to show first everything, and then 7 and later 9

You can use different combinations to obtain the desired effect.

Highliting specific code lines

Output display

x <- rnorm(30,10,2)
y <- x + rnorm(30,0,1)
z <- y*.5 + rnorm(30,0,1)
cor(x,y)
[1] 0.9397814
cor(y,z)
[1] 0.8478373
cor(x,z)
[1] 0.7840803
plot(x,y)

plot(y,z)

plot(x,z)

Output display

Using #| output-location you can show code in different ways:

  • fragment (visible after you click again)

  • slide (in a new slide)

  • column (in a column next to the code)

  • column-fragment (in a column next to the code once you click again)

You can also change background color of a single slide

by adding after the title: {background-color=“#f984ad”}

Same images formatting

![](figures/letsgo.jpeg){.absolute bottom=0 right=50 width="300" height="300"}

Animations


x <- rnorm(30,10,2)
y <- x + rnorm(30,0,1)
z <- y*.5 + rnorm(30,0,1)

Animations


x <- rnorm(30,10,2)
y <- x + rnorm(30,0,1)
z <- y*.5 + rnorm(30,0,1)

cor(x,y)
cor(y,z)
cor(x,z)
plot(x,y)
plot(y,z)
plot(x,z)

{auto-animate=“true”} after the slide title

Animation 2

This text is now here but it will move

Animation 2


To leave space for this new text


This text is now here but it will move

To have more advanced information about animations or revealjs in general:


link al sito

::: {style="text-align: center;"}
[link al sito](https://quarto.org/docs/presentations/revealjs/advanced.html){style="color:purple;"}
:::

Excercise

Create a presentation with the following elements:

  • Download “Sara_dataset.xlsx” or use a dataset of your own

  • Do some descriptive statistics of the variables and show the results

  • Set a theme

  • Insert slide numbers

  • Use some transitions between slides

  • Insert a table of content (toc)

  • Change toc name

  • Remove some slides form the toc

  • Make sure that the file is self-contained (embed-resources in YAML)

  • Insert a foot note

  • Insert some columns

  • Use incremental lists

  • Insert an image and format it

  • Insert citations with a .bib file

Excercise Extras

  • Modify the dimension and color of some text

  • Show some code and highlight different code sections

  • Insert an animation

  • Recall in the text some objects

  • Create an image from data

  • Add fig-cap to an image

  • Add figure label and reference to it in the text

  • Adjust image parameters within the chunk

Sara_dataset description

  • gender of participants (gender: 1 = female, 2 = male)

  • type of bachelor’s degree obtained (major: 1 = psychology, 2 = medicine, 3 = biology, 4 = sociology, 5 = economics)

  • experimental condition (cond: 1 = easy, …, 4 = impossible)

  • self-assessment of fear of mathematics (phobia) on a 0–10 scale

  • number of mathematics courses previously taken (prevmath)

  • score on a math pre-test (mathquiz)

  • score on a statistics test (statquiz)

  • self-measured heart rate under normal conditions (hr base), before the test (hr pre), and after the test (hr post)

  • scores on an anxiety test under normal conditions (anx base), before the test (anx pre), and after the test (anx post)

ambra.perugini@phd.unipd.it